<template>
  <el-card class="box-card" shadow="hover">
    <div slot="header" class="clearfix">
      <h1>数据上线</h1>
    </div>
    <el-form ref="form" :model="sqlTask" inline size="mini">
      <el-form-item label="应用">
        <el-input v-model="sqlTask.appName" :disabled="true"/>
      </el-form-item>
      <el-form-item label="数据库">
        <el-input v-model="sqlTask.databaseName" :disabled="true"/>
      </el-form-item>
      <el-form-item>
        <el-button :disabled="sqlTask.state&&sqlTask.state.code!='WAITING'" :loading="loading" type="primary"
                   @click="execTask">执行
        </el-button>
      </el-form-item>
    </el-form>

    <el-table :data="sqlTask.itemList" border size='mini' style="width: 100%">
      <el-table-column label="类型" prop="type.name" width="100"/>
      <el-table-column label="表名" prop="tableName" width="100"/>
      <el-table-column label="脚本" prop="sqlScript"/>
      <el-table-column label="状态" prop="state.name" width="100">
        <template slot-scope="scope">
          <el-tag :type="getTagType(scope.row.state.code)" size="mini">{{
              scope.row.state.name
            }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="错误" prop="resultMsg" width="200"/>
    </el-table>

  </el-card>
</template>
<script>
import {execTaskApi, getTaskApi} from "@/api/database";

export default {
  data() {
    return {
      sqlTask: {},
      loading: false,
    };
  },
  methods: {
    getTagType(code) {
      if (code == 'SUCCESS') return "success";
      if (code == 'FAIL') return "danger";
      return "info"
    },
    async loadTaskData() {
      if (this.$route.query.taskId) {
        this.sqlTask = await getTaskApi(this.$route.query.taskId);
      }
    },
    execTask() {
      this.loading = true;
      execTaskApi(this.sqlTask.id).then(() => {
        this.$message({
          message: '数据执行完成',
          type: 'success'
        });
        this.loadTaskData();
      }).finally(() => {
        this.loading = false;
      })
    }
  },
  created() {
    this.loadTaskData();
  }
};
</script>
<style scoped>
#applyFormWrapper {
  width: 800px;
  margin: 0 auto;
  text-align: center;
}

#applyFormWrapper h1 {
  margin: 20px;
}

#applyFormWrapper .el-timeline {
  text-align: left;
  margin-left: 100px;
  margin-top: 30px;
}

#applyFormWrapper .stepName {
  color: #303133;
}

#applyFormWrapper .username {
  color: #409EFF;
  margin-right: 5px;
}
</style>
